<template>
	<app-page>
		<wd-config-provider :theme="theme">
			<view class="container">
				<image class="header-bg" src="@/my/static/beijing.png"></image>
				<view class="header">
					<view class="name">客服中心</view>
					<view class="date">CALL CENTER</view>
					<view class="text">{{ tel }}</view>
				</view>
				<view>
					<wd-form ref="formRef" :model="formData" :rules="formRules">
						<wd-input prop="title" type="text" custom-class="input" v-model="formData.title"
							placeholder="问题主题" />
						<wd-textarea prop="info" custom-class="area" v-model="formData.info" placeholder="请描述问题" />
					</wd-form>
				</view>

				<view class="submit-btns">
					<wd-button type="success"
						custom-class="wd-button-custom-class-my-success wd-button-custom-class-w100"
						@click="submit">提交</wd-button>
				</view>
			</view>
		</wd-config-provider>
	</app-page>
</template>

<script lang="ts">
	import { defineComponent, ref, computed } from 'vue';
	import { useToast } from '@/uni_modules/wot-design-uni';
	import useRouter from '@/hooks/useRouter.ts';
	import { useAppStore } from "@/store"
	import { addKfMsg } from "@/api/index";
	export default defineComponent({
		name: '',
		setup(props, ctx) {
			const appStore = useAppStore();
			const router = useRouter();
			// 信息提示
			const toast = useToast();
			// 日间light、夜间dark主题
			const theme = ref('light');
			const formRef = ref(null);
			const formRules = ref({
				title: [
				],
				info: []

			});
			const formData = ref({
				title: "",
				info: ""
			});
			const tel = computed(() => {
				return appStore.getAppConfigValue('kf_tel');
			});
			const submit = () => {
				formRef.value.validate().then(({ valid }) => {
					// 提交表单数据到服务器，并跳转到结果页面。这里只是模拟跳转。
					if (valid) {
						addKfMsg(formData.value).then(res => {
							uni.$wdToast.show("提交成功！");
						})
					}
				})
			}
			return {
				theme,
				formRef,
				submit,
				formData,
				formRules,
				tel
			};
		}
	});
</script>
<!-- #ifdef MP-WEIXIN -->
<style lang="less">
	page {
		background-color: #f2f2f2;
	}
</style>
<!-- #endif -->
<style lang="less" scoped>
	page {
		background-color: #f2f2f2;
	}

	.container {
		position: relative;
		padding: 24rpx;



		.header-bg {
			position: absolute;
			top: 24rpx;
			left: 24rpx;
			width: calc(100% - 24rpx - 24rpx);
			height: 238rpx;
			z-index: 1;
		}

		.header {
			position: relative;
			z-index: 2;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: calc(238rpx - 24rpx - 48rpx);
			padding-top: 12rpx;
			padding: 24rpx 24rpx 48rpx;
			top: 0px;

			.name {
				margin-top: 20rpx;
				margin-left: 40rpx;
				width: auto;
				height: 30rpx;
				font-family: PingFang;
				font-weight: 550;
				font-size: 53rpx;
				color: #ffffff;
			}

			.date {
				margin-left: 40rpx;
				width: 206rpx;
				margin-top: 50rpx;
				font-family: PingFang;
				font-weight: 500;
				font-size: 23rpx;
				color: #ffffff;
			}

			.text {
				margin-left: 40rpx;
				font-family: Akrobat;
				font-weight: 530;
				font-size: 46rpx;
				color: #ffffff;
			}
		}

		:deep(.input) {
			margin-top: 30rpx;
			padding: 20rpx;
			width: calc(100% - 24rpx - 24rpx);
			border-radius: 10rpx;

			&::after {
				display: none;
			}
		}

		:deep(.area) {
			margin-top: 30rpx;
			padding: 20rpx;
			width: calc(100% - 24rpx - 24rpx);
			border-radius: 10rpx;
		}

		.submit-btns {
			display: flex;
			margin-top: 150rpx;
			margin-bottom: 40rpx;
		}


	}
</style>